<template>
  <div class="cartList">
    <div class="cartList__header">
      <p class="cartList__header__info">
        我的全部购物车（<span class="cartList__header__num">2</span>）
      </p>
    </div>
    <div class="cartList__content">
      <div class="cartList__content__box">
        <h2 class="cartList__content__box__title">沃尔玛</h2>
        <div class="cartList__content__box__product">
          <img
            src="http://www.dell-lee.com/imgs/vue3/tomato.png"
            class="cartList__content__box__product__pic"
            alt=""
          />
          <div class="cartList__content__box__product__con">
            <span class="cartList__content__box__product__info">番茄250g/份</span>
            <p class="cartList__content__box__product__price">
              <span class="product__unitprice"><em>&yen;</em><i>33.6 x 3</i></span>
              <span class="product__totalprice"><em>&yen;</em><i>99.9</i></span>
            </p>
          </div>
        </div>
        <div class="cartList__content__box__product">
          <img
            src="http://www.dell-lee.com/imgs/vue3/cherry.png"
            class="cartList__content__box__product__pic"
            alt=""
          />
          <div class="cartList__content__box__product__con">
            <span class="cartList__content__box__product__info">提子250g/份</span>
            <p class="cartList__content__box__product__price">
              <span class="product__unitprice"><em>&yen;</em><i>33.6 x 3</i></span>
              <span class="product__totalprice"><em>&yen;</em><i>99.9</i></span>
            </p>
          </div>
        </div>
        <div class="cartList__content__box__total">
          <p class="cartList__content__box__total__info">共计3件/1.4kg<span class="icon iconfont">&#xe8a4;</span></p>
        </div>
      </div>
      <div class="cartList__content__box">
        <h2 class="cartList__content__box__title">京东7FRESH七鲜</h2>
        <div class="cartList__content__box__product">
          <img
            src="http://www.dell-lee.com/imgs/vue3/tomato.png"
            class="cartList__content__box__product__pic"
            alt=""
          />
          <div class="cartList__content__box__product__con">
            <span class="cartList__content__box__product__info">番茄250g/份</span>
            <p class="cartList__content__box__product__price">
              <span class="product__unitprice"><em>&yen;</em><i>33.6 x 3</i></span>
              <span class="product__totalprice"><em>&yen;</em><i>99.9</i></span>
            </p>
          </div>
        </div>
        <div class="cartList__content__box__product">
          <img
            src="http://www.dell-lee.com/imgs/vue3/cherry.png"
            class="cartList__content__box__product__pic"
            alt=""
          />
          <div class="cartList__content__box__product__con">
            <span class="cartList__content__box__product__info">提子250g/份</span>
            <p class="cartList__content__box__product__price">
              <span class="product__unitprice"><em>&yen;</em><i>33.6 x 3</i></span>
              <span class="product__totalprice"><em>&yen;</em><i>99.9</i></span>
            </p>
          </div>
        </div>
      </div>
      <div class="cartList__content__box">
        <h2 class="cartList__content__box__title">百果园</h2>
        <div class="cartList__content__box__product">
          <img
            src="http://www.dell-lee.com/imgs/vue3/tomato.png"
            class="cartList__content__box__product__pic"
            alt=""
          />
          <div class="cartList__content__box__product__con">
            <span class="cartList__content__box__product__info">番茄250g/份</span>
            <p class="cartList__content__box__product__price">
              <span class="product__unitprice"><em>&yen;</em><i>33.6 x 3</i></span>
              <span class="product__totalprice"><em>&yen;</em><i>99.9</i></span>
            </p>
          </div>
        </div>
        <div class="cartList__content__box__product">
          <img
            src="http://www.dell-lee.com/imgs/vue3/cherry.png"
            class="cartList__content__box__product__pic"
            alt=""
          />
          <div class="cartList__content__box__product__con">
            <span class="cartList__content__box__product__info">提子250g/份</span>
            <p class="cartList__content__box__product__price">
              <span class="product__unitprice"><em>&yen;</em><i>33.6 x 3</i></span>
              <span class="product__totalprice"><em>&yen;</em><i>99.9</i></span>
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <Docker :currentIndex="1" />
</template>

<script>
import Docker from "../../components/Docker";
import ShopInfo from "../../components/ShopInfo";
export default {
  name: "CartList",
  components: { Docker, ShopInfo },
};
</script>

<style lang="scss" scoped>
@import "../../style/viriables.scss";
.cartList {
  overflow-y: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0.5rem;
  padding: 0 0.18rem;
  background-color: $cartList-bgcolor;
  &__header {
    margin: 0 -0.18rem;
    background-color: $content-fzcolor;
    &__info {
      font-size: 0.16rem;
      color: $content-fontcolor;
      text-align: center;
      line-height: 0.44rem;
    }
  }
  &__content {
    &__box {
      margin-top: 0.16rem;
      padding: 0.16rem;
      border-radius: 0.04rem;
      background-color: $content-fzcolor;
      &__title {
        font-size: 0.16rem;
        color: $content-fontcolor;
        margin-bottom: 0.16rem;
      }
      &__product {
        display: flex;
        margin-bottom: 0.16rem;
        &__pic {
          width: 14.984%;
          margin-right: 0.16rem;
        }
        &__con {
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: space-around;
        }
        &__info {
          font-size: 0.14rem;
          color: $content-fontcolor;
        }
        &__price {
          display: flex;
          justify-content: space-between;
          span {
            font-size: 0.14rem;
          }
          .product__unitprice {
            color: #E93B3B;
          }
          .product__totalprice {
            color: #000;
          }
          em {
            font-size: 0.1rem;
          }
        }
      }
      &__total {
        background-color: #F5F5F5;
        &__info {
          font-size: 0.14rem;
          color: #999999;
          line-height: 0.28rem;
          text-align: center;
          .icon {
            font-size: 0.24rem;
            vertical-align: middle;
          }
        }
      }
    }
    .cartList__content__box:last-child {
      margin-bottom: 0.16rem;
    }
  }
}
</style>